<template>
  <div>
    <el-container>
      <el-aside width="200px" v-show="isShow">
        <el-card style="height: calc(100% - 10px)">
          <plantDetails-tree></plantDetails-tree>
        </el-card>
      </el-aside>
      <el-main>
        <isShowTreeBtn @showTree="handleShowTree"></isShowTreeBtn>
        <!-- <div style="text-align: right; margin: 10px 0 30px 0">
          <el-button size="mini">设备搜索</el-button>
        </div> -->
        <div class="details-title-warp">子设备列表</div>
        <el-table
          :data="tableData"
          stripe
          border
          :header-cell-style="{
            background: '#fafafa',
            fontSize: '12px',
            color: '#000',
          }"
        >
          <el-table-column label="设备状态" prop="devstate" width="150"></el-table-column>
          <el-table-column
            label="电站名称"
            prop="plantname"
            width="150"
          ></el-table-column>
          <el-table-column
            label="设备类型"
            prop="devtypeid"
            width="150"
          ></el-table-column>
          <el-table-column label="设备名称" prop="devname" width="150"></el-table-column>
          <el-table-column label="机型" prop="invtype"></el-table-column>
          <el-table-column label="软件版本号" prop="softwareversion"></el-table-column>
          <el-table-column label="设备SN号" prop="esncode"></el-table-column>
        </el-table>
        <div style="text-align: right; margin: 10px 0 30px 0">
          <el-pagination
            :total="total"
            :current-page="params.pageNo"
            :page-size="params.pageSize"
            :page-sizes="[5, 20, 30, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next,sizes, jumper"
          ></el-pagination>
        </div>
        <div class="details-title-warp">基础信息</div>
        <el-descriptions class="margin-top" :column="3" size="" border>
          <el-descriptions-item v-for="(val, key) in basicDict" :item="key">
            <template slot="label">
              <div style="color: #000; font-weight: bold">
                <i class="el-icon-orange"></i>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="val"
                  placement="top-start"
                >
                  <span>&nbsp;{{ val }}</span>
                </el-tooltip>
              </div>
            </template>
            <div v-if="key === 'signal'">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <template #content> {{ val }} </template>
                <signalWarp :strength="val" :width="50" :height="30"></signalWarp>
              </el-tooltip>
            </div>
            <div v-else>
              <el-tooltip class="item" effect="dark" placement="top-start">
                <template #content> {{ basicData[key] }} </template>
                <span>{{ basicData[key] }}</span>
              </el-tooltip>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import plantDetailsTree from "../components/tree.vue";
import isShowTreeBtn from "../components/isShowTreeBtn.vue";
import signalWarp from "./components/signal-wrap.vue";
import { getPvData, getSelectChildDevices } from "@/api/solarPower/index.js";
export default {
  components: { plantDetailsTree, signalWarp, isShowTreeBtn },
  name: "plantDetails",
  data() {
    return {
      isShow: true,
      // paramData: this.$route.query,
      paramData: this.$store.state.solarPower.terrData,
      total: 0,
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 5,
      },

      basicData: {},

      basicDict: {
        // pv_equipment_id: "主键", //主键
        devname: "设备名称", //设备名称
        id: "设备ID（设备编号）", //设备ID（设备编号）
        gridconnectiondate: "电站的并网时间，包含时区", //电站的并网时间，包含时区
        contactmethod: "电站联系人联系方式", //电站联系人联系方式
        contactperson: "电站联系人", //电站联系人
        capacity: "组串容量", //组串容量
        latitude: "纬度", //纬度
        longitude: "经度", //经度
        plantname: "电站名称", //电站名称
        invtype: "机型（只有逆变器有机型）", //机型（只有逆变器有机型）
        softwareversion: "软件版本号", //软件版本号
        devtypeid: "设备类型ID", //设备类型ID
        esncode: "设备SN号", //设备SN号
        parent_id: "父ID", //父ID
        pv_dev_state: "设备状态", //设备状态
        plantaddress: "电站详细地址", //电站详细地址
        plantcode: "电站编号", //电站编号
        stationcode: "电站编号", //电站编号
        add_userid: "添加人ID", //添加人ID
        add_date: "添加时间", //添加时间
        modify_userid: "修改人ID", //修改人ID
        modify_date: "修改时间", //修改时间
        system_id: "系统ID", //系统ID
        devstate: "设备状态", //设备状态
      },
    };
  },
  created() {},
  mounted() {
    this.getPvData();
    // console.log("62", this.paramData);
    this.getSelectChildDevices();
  },
  watch: {
    // "$store.state.solarPower.terrData": {
    //     handler(val) {
    //         this.paramData = val;
    //         console.log("62", this.paramData);
    //     },
    // },
    "$store.state.solarPower.terrData": {
      deep: true,
      handler(val) {
        this.paramData = val;
        this.getPvData();
        this.getSelectChildDevices();
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getSelectChildDevices();
    },
    handleCurrentChange(val) {
      this.params.pageNo = val;
      this.getSelectChildDevices();
    },
    handleShowTree(val) {
      this.isShow = val;
    },
    getPvData() {
      getPvData(this.paramData).then((res) => {
        const resData = res.data;
        const { code, data, msg } = resData;
        if (code == 200) {
          this.basicData = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    getSelectChildDevices() {
      const { pageSize, pageNo } = this.params;
      const formData = {
        pageSize,
        pageNo,
        parentId: this.paramData.id,
      };
      getSelectChildDevices(formData).then((res) => {
        const resData = res.data;
        this.total = resData.totalCount;
        const { code, data, msg } = resData;
        if (code == 200) {
          this.tableData = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__body tr:hover > td {
  background-color: #cce5ff !important;
}
.details-title-warp {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin: 10px 0;
}
</style>
